<html>
  <head>
    <meta charset="utf-8">
    <title>Input: Select</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="../../dist/css/ionic.css" rel="stylesheet">
    <script src="../../dist/js/ionic.bundle.js"></script>
  </head>
  <body>

    <header class="bar bar-header bar-dark">
      <h1 class="title">Input: Select</h1>
    </header>

    <main class="content has-header padding">

      <p>
        <select>
          <option>Unstyled select element</option>
          <option>Unstyled select element</option>
          <option>Unstyled select element</option>
        </select>
      </p>

      <p>
        <span class="select-inline">
          <select>
            <option>HTML</option>
            <option>CSS</option>
            <option>JavaScript</option>
          </select>
        </span>
      </p>

      <p>
        <span class="select-inline">
          <select>
            <option>January</option>
            <option>February</option>
            <option>March</option>
            <option>April</option>
            <option>May</option>
            <option>June</option>
            <option>July</option>
            <option>August</option>
            <option>September</option>
            <option>October</option>
            <option>November</option>
            <option>December</option>
          </select>
        </span>
        <span class="select-inline">
          <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
            <option>13</option>
            <option>14</option>
            <option>15</option>
            <option>16</option>
            <option>17</option>
            <option>18</option>
            <option>19</option>
            <option>20</option>
            <option>21</option>
            <option>22</option>
            <option>23</option>
            <option>24</option>
            <option>25</option>
            <option>26</option>
            <option>27</option>
            <option>28</option>
            <option>29</option>
            <option>30</option>
            <option>31</option>
          </select>
        </span>
        <span class="select-inline">
          <select>
            <option>2014</option>
            <option>2015</option>
            <option>2016</option>
            <option>2017</option>
            <option>2018</option>
            <option>2019</option>
            <option>2020</option>
          </select>
        </span>
      </p>

      <div class="list">

        <div class="item item-input item-select">
          <div class="input-label">
            Lightsaber
          </div>
          <select>
            <option>Blue</option>
            <option selected>Green</option>
            <option>Red</option>
          </select>
        </div>

        <div class="item item-input item-select">
          <div class="input-label">
            Fighter
          </div>
          <select>
            <option>ARC-170</option>
            <option>A-wing</option>
            <option>Delta-7</option>
            <option>Naboo N-1</option>
            <option>TIE Fighter</option>
            <option selected>X-wing</option>
            <option>Y-wing</option>
          </select>
        </div>

        <div class="item item-input item-select">
          <div class="input-label">
            Droid
          </div>
          <select>
            <option>2-1B</option>
            <option>B1</option>
            <option>C-3PO</option>
            <option>IG-88</option>
            <option>IT-O</option>
            <option selected>R2-D2</option>
          </select>
        </div>

        <div class="item item-input item-select">
          <div class="input-label">
            Planet
          </div>
          <select>
            <option>Alderaan</option>
            <option selected>Dagobah</option>
            <option>Felucia</option>
            <option>Geonosis </option>
            <option>Hoth</option>
            <option>Kamino</option>
            <option>Mygeeto</option>
            <option>Naboo</option>
            <option>Tataouine</option>
            <option>Utapau</option>
            <option>Yavin</option>
          </select>
        </div>

      </div>

      <div class="margin">
        <p><a class="button button-secondary" href="./">All CSS Tests</a></p>
      </div>

    </main>

  </body>
</html>
